<template>
    <div>
        <button v-on:click="sub">-</button>
        <span>{{count}}</span>
        <button @click="add">+</button>
    </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
    setup () {
        const state = reactive({
            count: 1,
        })
        const add=()=>{
            state.count++
        }
        const sub=()=>{
            if(state.count>0){
                state.count--;
            }
        }
        return {
            ...toRefs(state),
            add,
            sub,
        }
    }
}
</script>

<style lang="scss" scoped>

</style>